<!-- center-zoom-swiper.vue -->
<template>
  <view class="center-zoom-swiper">
    <view class="swiper-container" :style="{height:swiperHeight+'rpx'}">
      <swiper 
        :current="current" 
        :autoplay="autoplay" 
        :interval="interval" 
        :circular="circular"
        @change="onSwiperChange"
        class="swiper"
      >
        <swiper-item v-for="(item, index) in bannerList" :key="index" class="swiper-item">
          <view class="swiper-item-container" @click="onSwiprtItemClick(item.id)" v-if="!swiperItemSlot">
            <image 
              :src="item[urlKey]" 
              mode="aspectFill" 
              class="swiper-image"
              :class="{ active: current === index }"
            />
            <!-- <text class="" :class="{ active: current === index }">{{ item.title }}</text> -->
            <!-- <text class="image-desc" :class="{ active: current === index }">{{ item.desc }}</text> -->
          </view>
		<slot name="swiperItem"></slot>
        </swiper-item>
      </swiper>
      
      <!-- 指示器 
      <view class="swiper-indicators">
        <view 
          v-for="(item, index) in bannerList" 
          :key="index" 
          class="indicator"
          :class="{ active: current === index }"
          @click="switchTo(index)"
        ></view>
      </view>-->
      
      <!-- 控制按钮 
      <view class="swiper-controls">
        <button class="control-btn" @click="prev">
          <text class="iconfont icon-arrow-left"></text>
          上一张
        </button>
        <button class="control-btn" @click="next">
          下一张
          <text class="iconfont icon-arrow-right"></text>
        </button>
      </view>-->
    </view>
  </view>
</template>

<script>
export default {
  name: 'center-zoom-swiper',
  computed: {
      // 检测插槽是否被使用
     swiperItemSlot() {
        return !!this.$slots.swiperItem;
      },
  },
  props: {
    // 轮播图数据
    bannerList: {
      type: Array,
      default: () => []
    },
    // 是否自动播放
    autoplay: {
      type: Boolean,
      default: true
    },
    // 自动播放间隔
    interval: {
      type: Number,
      default: 3000
    },
    // 是否循环播放
    circular: {
      type: Boolean,
      default: true
    },
    // 初始显示项
    initialIndex: {
      type: Number,
      default: 0
    },
	swiperHeight:{
		type: Number,
		default: 154
	},
	urlKey: {
		type: String,
		default () {
			return 'showpic'
		}
	},
  },
  data() {
    return {
      current: this.initialIndex
    };
  },
  mounted() {
    // 确保初始显示项正确
    this.$nextTick(() => {
      this.current = this.initialIndex;
    });
  },
  methods: {
    // 切换到指定项
    switchTo(index) {
      this.current = index;
    },
    // 切换到下一项
    next() {
      this.current = (this.current + 1) % this.bannerList.length;
    },
    // 切换到上一项
    prev() {
      this.current = (this.current - 1 + this.bannerList.length) % this.bannerList.length;
    },
    // 轮播图切换事件
    onSwiperChange(e) {
      this.current = e.detail.current;
      this.$emit('change', this.current);
    },
	onSwiprtItemClick(id) {
      this.$emit('click', id);
    },
  }
};
</script>

<style scoped>
.center-zoom-swiper {
  position: relative;
  width: 100%;
}

.swiper-container {
  position: relative;
  width: 100%;
  /* height: 300px; */
  /* border-radius: 15px; */
  overflow: hidden;
  /* box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); */
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-item {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.swiper-item-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0.0);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0, 0.885, 0.32, 1);
  /* border-radius: 10px; */
}

.swiper-image.active {
  transform: scale(1);
  opacity: 1;
}
/* 
.swiper-indicators {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.indicator.active {
  background: #3498db;
  transform: scale(1.2);
}

.swiper-controls {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 15px;
}

.control-btn {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
}

.control-btn:active {
  background: #2980b9;
  transform: translateY(1px);
  box-shadow: 0 2px 5px rgba(52, 152, 219, 0.3);
}

.image-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 10;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.3s;
}

.image-desc {
  position: absolute;
  bottom: 50px;
  left: 20px;
  color: white;
  font-size: 14px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  z-index: 10;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease 0.5s;
} */

/* .image-title.active,
.image-desc.active {
  opacity: 1;
  transform: translateY(0);
} */

/* 响应式设计 */
/* @media (max-width: 600px) {
  .swiper-container {
    height: 250px;
  }
  
  .image-title {
    font-size: 18px;
    bottom: 15px;
    left: 15px;
  }
  
  .image-desc {
    font-size: 12px;
    bottom: 40px;
    left: 15px;
  }
  
  .control-btn {
    padding: 8px 15px;
    font-size: 12px;
  }
} */
</style>